/**
 * 百度地图页面
 */
import React, {
    Component,
    PropTypes
} from 'react';

import {
    MapView,
    MapTypes,
    Geolocation
} from 'react-native-baidu-map';

import {
    Button,
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableWithoutFeedback,
    TouchableHighlight,
    Platform,
    BackAndroid
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
let Dimension = require('Dimensions');
let data = require('../../Data/shopMap.json');
let ImageScan = require('../../img/icon_homepage_scan.png');
export default class BaiduMapView extends Component {

    constructor() {
        super();

        this.state = {
            mayType: MapTypes.NORMAL,
            zoom: 15,
            center: {
                longitude: 108.344214,
                latitude: 22.792447
            },
            trafficEnabled: false,
            baiduHeatMapEnabled: false,
            markers: []
        };
        this.geo=this.geo.bind(this);
        this.setMapTypeSatellite=this.setMapTypeSatellite.bind(this);
        this.setMapTypeNormal=this.setMapTypeNormal.bind(this);
        this.setTrafficEnabled=this.setTrafficEnabled.bind(this);
        this.setHeatMapEnabled=this.setHeatMapEnabled.bind(this)
        this.back=this.back.bind(this)
    }

    componentDidMount() {
        let shop=[];
        let arr=data.data;
        for (let i=0;i<arr.length;i++){
            let item=arr[i];
            let shopItem={};
            shopItem.longitude=item.location.longitude;
            shopItem.latitude=item.location.latitude;
            shopItem.title=item.title+"\n"+item.address;
            shop.push(shopItem)
        }
        this.setState({markers:shop});
    }
    componentWillMount () {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.back);
        }
    }
    componentWillUnmount(){
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener('hardwareBackPress', this.back);
        }
        // this.props.tabBar.show();
    }
    render() {
        return (
            <View style={styles.container}>
                <MapView
                    trafficEnabled={this.state.trafficEnabled}
                    baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
                    zoom={this.state.zoom}
                    mapType={this.state.mapType}
                    center={this.state.center}
                    marker={this.state.marker}
                    markers={this.state.markers}
                    style={styles.map}
                    onMarkerClick={(e) => {
                        //点击店标注事件
          }}
                    onMapClick={(e) => {
          }}
                >
                </MapView>
                <View style={styles.leftView}>
                    {this.renderLeftTool("location-arrow",this.geo)}
                    {this.renderLeftTool("map",this.setMapTypeSatellite)}
                    {this.renderLeftTool("map-o",this.setMapTypeNormal)}
                    {this.renderLeftTool("puzzle-piece",this.setTrafficEnabled)}
                    {this.renderLeftTool("fire",this.setHeatMapEnabled)}
                </View>
            </View>
        );
    }
    renderLeftTool(name,fuc){
        return(
            <TouchableWithoutFeedback onPress={fuc}>
                <Icon name={name} size={20} color="#404040" style={styles.imageStyle}/>
            </TouchableWithoutFeedback>
        )
    }
    setHeatMapEnabled(){
        this.setState({
            baiduHeatMapEnabled: !this.state.baiduHeatMapEnabled
        });
    }
    setTrafficEnabled(){
        this.setState({
            trafficEnabled: !this.state.trafficEnabled
        });
    }
    geo(){
        Geolocation.getCurrentPosition()
            .then(data => {
                this.setState({
                    zoom: 15,
                    marker: {
                        latitude: data.latitude,
                        longitude: data.longitude,
                        title:data.street
                    },
                    center: {
                        latitude: data.latitude,
                        longitude: data.longitude,
                        rand: Math.random()
                    }
                });
            })
            .catch(e =>{
                console.warn(e, 'error');
            })
    }
    setMapTypeSatellite(){
        this.setState({
            mapType: MapTypes.SATELLITE
        });
    }
    setMapTypeNormal(){
        this.setState({
            mapType: MapTypes.NORMAL
        });
    }

    back(){
        this.props.navigation.goBack();
        return true;
    }
    static navigationOptions = {
        headerTitle:'商店地图',
    };
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        height: 40
    },
    container: {
        flex: 1,
    },
    map: {
        flex:1
    },
    leftView:{
        position: 'absolute',
        left: 5,
        top: 50,
        padding: 2,
    },
    imageStyle:{
        margin:10,
    }
});